/** 截取图片* */


//多张图片裁剪
var jcrop_api_many,
    boundMany_x,
    boundMany_y,
    $previewMany = $('#previewMany-pane'),
    $pimgMany = $("#previewMany-pane").find(".preview-container").find("img");

function updatePreviewMany(c) {
    $pimgMany = $("#previewMany-pane").find(".preview-container").find("img");
    if (parseInt(c.w) > 0) {
        var rx = $("#previewMany-pane").find(".preview-container").width() / c.w;
        var ry = $("#previewMany-pane").find(".preview-container").height() / c.w;
        // debugger;
        $pimgMany.css({
            width: Math.round(rx * boundMany_x) + 'px',
            height: Math.round(ry * boundMany_y) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'

        });
        var person = {};
        person['x'] = c.x;
        person['y'] = c.y;
        person['w'] = c.w;
        person['h'] = c.h;
        person['size_w'] = $("#img_n" + n).width();
        person['size_h'] = $("#img_n" + n).height();
        var jsonDAta = JSON.stringify(person);
        $("#imgCoordinate" + n).val(jsonDAta);


    }
}

function initMany(w, h) {

    if (jcrop_api_many != undefined) {
        jcrop_api_many.destroy();
    }
    // 获取图片在html 中显示的高度和宽度
    var img_n = "#img_n" + n;
    $(img_n).Jcrop({
        bgFade: true,
        aspectRatio: w / h,
        // minSize: [100, 100],
        onChange: updatePreviewMany,
        onSelect: updatePreviewMany,
        setSelect: [1, 1, 200, 200]
    }, function () {
        var bounds = this.getBounds();
        boundMany_x = bounds[0];
        boundMany_y = bounds[1];
        jcrop_api_many = this;
        $previewMany.append(jcrop_api_many);
    });

    $(".previewMany-pane #previewMany-pane #previewMany_div2").empty();
    $(".previewMany-pane #previewMany-pane  #previewMany_div2").append('<img id="preview_img' + n + '" style="width: 200px;" class="jcrop-preview" alt="Preview"  src="' + $("#img_n" + n).attr("src") + '" />');

}

function img_Sure() {
    // 克隆截图预览图片
    var imgList = $("#previewMany-pane").clone().addClass('previewMany-pane-scan').removeClass('previewMany-pane-content').removeAttr('id');
    var imgShow = $('<div class="tag-img-item upload-img-show"></div>');
    $("#Img_sure").append(imgShow);
    imgShow.append(imgList);
    imgShow.append($("#imgCoordinate" + n));
    imgShow.append($("#previewMany" + n));
    imgShow.append('<div class="del-icon" data-content="' + n + '"  onclick="deleteImage(this)"></div>');
    $(".manyImg input").remove();
    $(".previewMany #previewMany").empty();
    $(".previewMany-pane #previewMany-pane #previewMany_div2").empty();
    $("#cutImageModal").modal('hide');

}

function initManyimg() {
    $(".manyImg input").remove();
    $(" #previewMany").empty();
    $(".previewMany-pane #previewMany-pane #previewMany_div2").empty();
}

function desMany() {
    $("#previewMany").hide();
    jcrop_api_many.destroy();
}

/**
 * 多张图片度删除
 * @param obj
 */

function closeCutImageModal() {
    $("#cutImageModal").modal('hide');
}

var n = 0;

function uploadMulImages(element) {
    // debugger;
    appendDiv();
    ++n;
    initManyimg();
    var html = '';
    html += ' <input style="display: none" class="upload-img-box" ';
    html += 'id = "previewMany' + n + '" name="previewMany[]" type="file">';
    html += '<input type="hidden" id="imgCoordinate' + n + '" name="imgCoordinate[]" />';
    var obj = $(html);
    obj.change(function () {
        var element = $("#previewMany");
        PreviewImage(this, element);
        $("#cutImageModal").modal('show');
    });
    obj.click();
    $(element).append(obj);

    return false;
}

/**
 * 删除图片
 * @param obj
 */
function deleteImage(obj) {

    if ($(obj).attr('data-content') != undefined) {
        var id = $(obj).attr('data-content');
        $("#preview_img" + id + "").parent().parent().parent().remove();
        // $("#imgCoordinate" + id + "").remove();
        // $("#previewMany" + id + "").remove();
        $(obj).remove();
    }
    $(obj).parent().remove();
    $(obj).parent().html('');

}

function appendDiv() {
    $("body").find("#cutImageModal").remove();
    var appdiv = $('<div class="modal fade" id="cutImageModal" tabindex="-1" role="dialog" aria-labelledby="cutImageModalModalLabel">' +
        '<div class="modal-dialog modal-lg" role="document">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" aria-label="Close" onclick="closeCutImageModal()">' +
        '<span aria-hidden="true">&times;' +
        '</span>' +
        '</button>' +
        '<h4 class="modal-title" id="cutImageModalModalLabel">图片</h4>' +
        '</div><div id="modalEdit" class="modal-body" style="height: 400px">' +
        '<div id="previewMany"></div>' +
        '<div class="previewMany-pane">' +
        '<div id="previewMany-pane" class="previewMany-pane-content" >' +
        '<div id="previewMany_div2" class="preview-container">' +
        '</div></div></div></div>' +
        '<div class="modal-footer">' +
        '<a class="btn btn-primary" onclick="img_Sure()"><i class="fa fa-save"></i> 保存</a>' +
        '<a class="btn btn-cancel" onclick="closeCutImageModal()"><i class="fa fa-remove"></i> 取消</a></div></div></div></div>');
    $("body").append(appdiv);

}